import React, { useState } from 'react';
import styled, { keyframes } from 'styled-components';

// 定义动画
const pulse = keyframes`
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
`;

// 样式定义
const Container = styled.div`
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; // 允许换行
`;

const ColorButton = styled.button<{ selected: boolean }>`
  width: 50px;
  height: 50px;
  border-radius: 25px;
  cursor: pointer;
  background-color: ${(props) => props.bgColor};
  transition: all 0.3s ease;

  ${(props) =>
        props.selected &&
        `
    animation: ${pulse} 1s infinite;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  `}
`;

const ColorPicker: React.FC = () => {
    const [selectedColor, setSelectedColor] = useState<string>('#FFFFFF');

    const colors = [
        '#FF69B4', '#00FFFF', '#7CFC00', '#FFD700', '#FFA500',
        '#FF8C00', '#FF0000', '#00FF00', '#0000FF', '#F0E68C',
        '#ADD8E6', '#F08080', '#F5DEB3', '#FFFFFF', '#000000',
        '#808080', '#87CEFA', '#FF6347', '#4169E1', '#8B008B',
        '#8A2BE2',
    ];

    return (
        <Container>
            {colors.map((color) => (
                <ColorButton
                    key={color}
                    bgColor={color}
                    selected={color === selectedColor}
                    onClick={() => setSelectedColor(color)}
                />
            ))}
        </Container>
    );
};

export default ColorPicker;